<template>
  <div v-loading="dataLoading" class="container flex flex_column">
    <!--    顶部导航条-->
    <div class="topNav flex flex_between">
      <div>
        <span class="back mr10 pointer" @click="Back"
          ><i class="el-icon-arrow-left" /> 返回</span
        >
        <span
          class="fw"
          v-if="$route.query.isCopy == false || $route.query.isCopy == 'false'"
          >{{ !$route.query.orderID ? "新建开单" : "编辑开单" }}</span
        >
        <span class="fw" v-else>{{ $route.query.excuteAction + "复制" }}</span>
      </div>
      <div class="orderTopBtn flex">
        <intelligenceButton
          ref="intellList"
          class="mr10"
          :customer-code="orderForm.productBase.customerCode"
          :order-no="orderForm.baseData.orderNo"
          :is-disable="disable"
        />
        <materialButton
          ref="materialList"
          class="mr10"
          :customer-code="orderForm.productBase.customerCode"
          :order-no="
            isDisable
              ? orderForm.baseData.oldOrderNo
              : orderForm.baseData.orderNo
          "
          :is-disable="disable"
        />
        <el-button
          type="primary"
          size="small"
          :loading="orderLoading"
          :disabled="orderLoading"
          @click="saveOrder"
          >保存</el-button
        >
      </div>
    </div>
    <div class="mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="orderForm"
        :rules="rules"
        label-width="110px"
        class="orderForm flex flex_between"
      >
        <div class="leftCon">
          <div class="formBox">
            <div class="cTitle">
              <h3>订单信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="订单单号">
                <el-input
                  v-model="orderForm.baseData.xieYiShuHao"
                  placeholder="系统自动生成"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <el-form-item label="协议书号" v-show="false">
                <el-input
                  v-model="orderForm.baseData.agreementNo"
                  placeholder="系统自动生成"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <el-form-item label="客户名称" prop="productBase.customerName">
                <el-input
                  v-model="orderForm.productBase.customerName"
                  placeholder="选择客户"
                  size="mini"
                  disabled
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="seletedCustomer"
                  />
                </el-input>
              </el-form-item>
              <el-form-item label="客户单号">
                <el-input
                  v-model="orderForm.baseData.customerBillNo"
                  placeholder="请输入内容"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="合同号">
                <el-input
                  v-model="orderForm.baseData.contractNo"
                  placeholder="选择合同"
                  size="mini"
                  disabled
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="selectedContract"
                  />
                </el-input>
              </el-form-item>
              <el-form-item label="订单类型" prop="baseData.orderType">
                <el-select
                        filterable
                  v-model="orderForm.baseData.orderType"
                  placeholder="请选择订单类型"
                  clearable
                  size="mini"
                  :disabled="
                    $route.query.orderTypeTitle == '老版复制' &&
                    orderForm.baseData.orderType != ''
                  "
                >
                  <el-option
                    v-for="item in orderTypeList"
                    :key="item.objectCode"
                    :label="item.objectName"
                    :value="item.objectCode"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="发货日期">
                <el-date-picker
                  v-model="orderForm.baseData.expectedDeliveryTime"
                  type="date"
                  :picker-options="option"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="订单备注" class="mt3">
                <el-input
                  v-model="orderForm.baseData.orderRemark"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-form-item label="印刷版面" class="mt5">
                <el-input
                  v-model="orderForm.excuteAction"
                  placeholder="印刷版面"
                  size="mini"
                  disabled
                />
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>产品信息</h3>
            </div>
            <div class="formItem">
              <el-form-item
                label="产品名称"
                prop="productBase.orderProductName"
              >
                <el-input
                  v-model="orderForm.productBase.orderProductName"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getOrderProductName"
                />
              </el-form-item>
              <el-form-item label="产品编码" class="mt3" v-if="$route.query.orderID">
                <el-input
                  v-model="orderForm.baseData.productCode"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <el-form-item label="产品版本" class="mt3">
                <el-input
                  v-model="orderForm.baseData.productVersions"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <el-form-item
                label="产品库存"
                class="mt3"
                v-if="$route.query.isCopy"
              >
                <el-input
                  v-model="orderForm.stockQuantity"
                  placeholder="请输入内容"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <template
                v-for="(item, index) in orderForm.productBase.tagDataList"
              >
                <el-form-item
                  :key="index"
                  :label="index === 0 ? '标签' : ' '"
                  class="mt3"
                >
                  <div class="flex">
                    <div class="flex1">
                      <div>
                        <el-input
                          v-model="item.productTagName"
                          placeholder="标签名称"
                          size="mini"
                          :disabled="isDisable"
                          @input="changeTagName"
                        />
                      </div>
                      <div>
                        <el-input
                          v-model="item.matchQuantity"
                          v-enterNumber
                          placeholder="请输入数量"
                          size="mini"
                          :disabled="isDisable"
                          @blur="getMatchQuantity(item)"
                        >
                          <template slot="prepend">数量</template>
                        </el-input>
                      </div>
                      <div class="flex flexs_center">
                        <div class="flex1">
                          <el-input
                            v-model="item.productTagPrice"
                            v-toFixed="6"
                            placeholder="标签单价"
                            size="mini"
                            @blur="getTagUnitPrice"
                          >
                            <template slot="prepend">单价</template>
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div v-if="index != 0 && !isDisable">
                          <span
                            class="tagdelete pointer"
                            @click="deleteTag(item, index)"
                            ><i class="el-icon-delete"
                          /></span>
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="!isDisable"
                      class="subAddTag"
                      :class="item.comparisonObject != 0 ? 'subtag' : ''"
                    >
                      <span class="pointer" @click="addSubTag(item, index)"
                        ><i class="el-icon-circle-plus"
                      /></span>
                    </div>
                  </div>
                </el-form-item>
              </template>
              <!-- <el-form-item v-if="!isDisable" label="">
                <div class="c_3F61F1">
                  <span class="pointer" @click="addMainTag"
                    ><i class="el-icon-plus" /> 新增标签</span
                  >
                </div>
              </el-form-item> -->
            </div>
            <div class="cTitle">
              <h3>订单统计</h3>
            </div>
            <div class="formItem">
              <el-form-item label="套装数量">
                <el-input
                  v-model="orderForm.baseData.taoZhuangQuantity"
                  v-enterNumber
                  placeholder="请输入内容"
                  size="mini"
                  @blur="getTagTotal"
                >
                  <template slot="append">{{
                    orderForm.productBase.tagDataList.length > 1 ? "套" : "枚"
                  }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="标签总数">
                <el-input
                  v-model="orderForm.baseData.tagSumQuantity"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">枚</template>
                </el-input>
              </el-form-item>
              <el-form-item label="套装单价">
                <el-input
                  v-model="moneyAuthority.taoZhuangPrice"
                  v-if="orderForm.baseData.taoZhuangPrice < 0"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  v-model="orderForm.baseData.taoZhuangPrice"
                  v-else
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="套装总金额">
                <el-input
                  v-if="orderForm.baseData.orderMoney < 0"
                  v-model="moneyAuthority.orderMoney"
                  v-toFixed="3"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  v-else
                  v-model="orderForm.baseData.orderMoney"
                  v-toFixed="3"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="实际套装单价">
                <el-input
                  v-if="orderForm.baseData.actualPrice < 0"
                  v-model="moneyAuthority.actualPrice"
                  v-toFixed="6"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  v-else
                  v-model="orderForm.baseData.actualPrice"
                  v-toFixed="6"
                  placeholder="系统计算"
                  size="mini"
                  @blur="getAllPrice"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="实际总金额">
                <el-input
                  v-if="orderForm.baseData.practicalPayMoney < 0"
                  v-model="moneyAuthority.practicalPayMoney"
                  v-toFixed="3"
                  placeholder="系统计算"
                  disabled
                  size="mini"
                >
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  v-else
                  v-model="orderForm.baseData.practicalPayMoney"
                  v-toFixed="3"
                  placeholder="系统计算"
                  size="mini"
                  @blur="getDiscountsMoney"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="优惠金额">
                <el-input
                  v-if="orderForm.baseData.discountsMoney < 0"
                  v-model="moneyAuthority.discountsMoney"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
                <el-input
                  v-else
                  v-model="orderForm.baseData.discountsMoney"
                  placeholder="系统计算"
                  size="mini"
                  disabled
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>标签数据</h3>
            </div>
            <div class="formItem">
              <el-form-item label="数据来源">
                <el-select
                        filterable
                  v-model="orderForm.baseData.dataComeFrom"
                  placeholder="请选择"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="无" :value="0" />
                  <el-option label="客户" :value="1" />
                  <el-option label="自编" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="数据数量">
                <el-input
                  v-model="orderForm.baseData.tagDataQuantity"
                  v-toFixed="3"
                  placeholder="请输入内容"
                  size="mini"
                />
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>产品包装</h3>
            </div>
            <div class="formItem">
              <el-form-item label="成品样式">
                <el-select
                        filterable
                  v-model="orderForm.productBase.productStyle"
                  placeholder="请选择成品样式"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                  @change="handleStyleChange"
                >
                  <el-option label="卷式" :value="2" />
                  <el-option label="平张" :value="1" />
                  <el-option label="折页" :value="3" />
                </el-select>
              </el-form-item>

              <el-form-item
                v-if="orderForm.productBase.productStyle !== 1"
                label="出标方向"
              >
                <el-select
                        filterable
                  v-model="orderForm.productBase.outDirection"
                  placeholder="请选择出标方向"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="上" :value="1" />
                  <el-option label="下" :value="2" />
                  <el-option label="左" :value="3" />
                  <el-option label="右" :value="4" />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle === 2"
                label="卷向"
              >
                <el-select
                        filterable
                  v-model="orderForm.productBase.scrollDirection"
                  placeholder="请选择成品样式"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="页面朝内" :value="1" />
                  <el-option label="页面朝外" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="贴标方式">
                <el-select
                        filterable
                  v-model="orderForm.productBase.tagAffixWay"
                  placeholder="请选择成品样式"
                  clearable
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option
                    label="自动帖"
                    :value="1"
                    :disabled="orderForm.productBase.productStyle === 1"
                  />
                  <el-option label="手帖" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle === 2"
                label="卷芯大小"
              >
                <el-input
                  v-model="orderForm.productBase.mandrelSize"
                  v-toFixed="3"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle === 2"
                label="外直径不超过"
              >
                <el-input
                  v-model="orderForm.productBase.notOverDiameter"
                  v-toFixed="3"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label="计算方式"
                v-if="
                  orderForm.productBase.tagDataList.length > 1 &&
                  orderForm.productBase.productStyle != 2
                "
              >
                <el-select
                        filterable
                  v-model="orderForm.baseData.calculationMethod"
                  placeholder="请选择计算方式"
                  clearable
                  size="mini"
                  @change="handleSelectChange"
                  :disabled="isDisable"
                >
                  <el-option label="张/套" :value="0"> </el-option>
                  <el-option label="套/张" :value="1"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle === 2"
                label="每卷等于"
              >
                <el-input
                  v-model="orderForm.productBase.pageEqualTags"
                  v-toFixed="3"
                  placeholder="生产填写"
                  size="mini"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{
                    orderForm.productBase.tagDataList.length > 1 ? "套" : "枚"
                  }}</template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle !== 2"
                :label="'每' + packingUnitLable + '等于'"
              >
                <el-input
                  v-model="orderForm.productBase.pageEqualTags"
                  v-toFixed="3"
                  placeholder="生产填写"
                  :disabled="isDisable"
                  size="mini"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{ packingUnit }}</template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="orderForm.productBase.productStyle !== 2"
                label="每包等于"
              >
                <el-input
                  v-model="orderForm.productBase.packageEqualPages"
                  v-toFixed="3"
                  placeholder="生产填写"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">张</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱等于">
                <el-input
                  v-model="orderForm.productBase.boxEqualPackages"
                  v-toFixed="3"
                  placeholder="生产填写"
                  size="mini"
                  :disabled="isDisable"
                  @blur="getBoxEqualTags"
                >
                  <template slot="append">{{
                    orderForm.productBase.productStyle !== 2 ? "包" : "卷"
                  }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱共计">
                <el-input
                  v-model="orderForm.productBase.boxEqualTags"
                  v-toFixed="3"
                  placeholder="生产填写"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{
                    orderForm.productBase.tagDataList.length > 1 ? "套" : "枚"
                  }}</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>其他信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="业务员">
                <el-input
                  v-model="orderForm.baseData.salesmanName"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                      @click="choniceSalesman"
                    />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input
                  v-model="orderForm.baseData.salesmanMobile"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">
                    <el-button slot="append" icon="el-icon-search" />
                  </template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="cenCon">
          <div class="tagsNav">
            <ul class="flex">
              <li
                v-for="(tags, index) in orderForm.productBase.tagDataList"
                :key="tags.tagClientCode + index"
                @click="tagChoice(index)"
              >
                <span :class="tagIndex === index ? 'on' : ''">{{
                  tags.productTagName
                }}</span>
              </li>
            </ul>
          </div>
          <div class="tagsBox flex flex_between">
            <div class="tagsLfBox flex-column-center">
              <!--  标签介绍 -->
              <div class="tagShow">
                <ul>
                  <li v-if="getPrintingMaterial">
                    使用材质: <span>{{ getPrintingMaterial }}</span>
                  </li>
                  <li v-if="getSurfaceRequireList.length > 0">
                    表面要求:
                    <template v-for="item in getSurfaceRequireList">
                      <span :key="item">{{ item }}</span>
                    </template>
                  </li>
                  <li v-if="getBottomColor">
                    底膜颜色: <span>{{ getBottomColor }}</span>
                  </li>
                  <li v-if="getScrapingCoatingColor">
                    刮开涂层: <span>{{ getScrapingCoatingColor }}</span>
                  </li>
                  <li v-if="getScrapingWordColor">
                    刮开文字: <span>{{ getScrapingWordColor }}</span>
                  </li>
                  <li
                    v-if="
                      orderForm.productBase.tagDataList
                        ? orderForm.productBase.tagDataList[tagIndex]
                            .layerDataList[layerIndex].technoPlaces
                        : false
                    "
                  >
                    数码:
                    <span
                      >{{
                        orderForm.productBase.tagDataList.length > 0
                          ? orderForm.productBase.tagDataList[tagIndex]
                              .layerDataList[layerIndex].technoPlaces
                          : ""
                      }}位</span
                    >
                  </li>
                  <li
                    v-if="
                      orderForm.productBase.tagDataList
                        ? orderForm.productBase.tagDataList[tagIndex]
                            .layerDataList[layerIndex].barCodePlaces
                        : false
                    "
                  >
                    条码:
                    <span
                      >{{
                        orderForm.productBase.tagDataList
                          ? orderForm.productBase.tagDataList[tagIndex]
                              .layerDataList[layerIndex].barCodePlaces
                          : ""
                      }}位</span
                    >
                  </li>
                </ul>
              </div>
              <!--  标签形状  -->
              <div class="labelBox" :class="tagShapeClass">
                <div class="xuxianBox flex-column-center">
                  <div class="flex flexs_center">
                    <div
                      v-if="
                        orderForm.productBase.tagDataList.length > 0
                          ? orderForm.productBase.tagDataList[tagIndex]
                              .layerDataList[layerIndex].isHaveTechno != 0
                          : false
                      "
                      class="flex-column-center mr15"
                    >
                      <span class="digital"
                        ><i class="iconfont digitalIco"
                      /></span>
                      <span>数码</span>
                    </div>
                    <div
                      v-if="
                        orderForm.productBase.tagDataList.length > 0
                          ? orderForm.productBase.tagDataList[tagIndex]
                              .layerDataList[layerIndex].isHaveBarCode != 0
                          : false
                      "
                      class="flex-column-center"
                    >
                      <span class="barCode"
                        ><i class="iconfont barCodeIco"
                      /></span>
                      <span>条码</span>
                    </div>
                  </div>
                </div>
                <div class="tpBorder jiaobiaoLT" />
                <div class="tpBorder jiaobiaoRT" />
                <div class="tpBorder jiaobiaoLB" />
                <div class="tpBorder jiaobiaoRB" />
                <!-- 异形的时候出现    -->
                <div class="yixing">
                  <div class="yibg1" />
                </div>
                <!--标签类型 --刮开涂层  -->
                <div class="yuan">
                  <div
                    v-if="
                      orderForm.productBase.tagDataList[tagIndex].tagType ===
                        2 ||
                      orderForm.productBase.tagDataList[tagIndex].tagType === 3
                    "
                    class="tagType"
                  >
                    揭开
                  </div>
                  <!--  刮开涂层 -->
                  <div
                    v-if="
                      orderForm.productBase.tagDataList[tagIndex].tagType ===
                        1 ||
                      orderForm.productBase.tagDataList[tagIndex].tagType === 3
                    "
                    class="coating"
                  >
                    刮开涂层
                  </div>
                </div>
                <!--  标签长度 -->
                <div class="tagWidth">
                  长：{{
                    orderForm.productBase.tagDataList[tagIndex].tagWidth || 0
                  }}
                  mm
                </div>
                <!--  R角，边空 -->
                <div class="tagBorder">
                  <div>
                    R角：{{
                      orderForm.productBase.tagDataList[tagIndex]
                        .tagBorderRadius || 0
                    }}
                    mm
                  </div>
                  <div>
                    边空：{{
                      orderForm.productBase.tagDataList[tagIndex].tagBorder || 0
                    }}
                    mm
                  </div>
                </div>
                <!--  标签宽度 -->
                <div class="tagHeight flex-column-center">
                  宽：{{
                    orderForm.productBase.tagDataList[tagIndex].tagHeight || 0
                  }}
                  mm
                </div>
              </div>
              <!--  印刷层  -->
              <div class="yinshuaBox flex flex_center">
                <ul
                  v-if="
                    orderForm.productBase.tagDataList.length > 0
                      ? orderForm.productBase.tagDataList[tagIndex]
                          .layerDataList.length > 1
                      : false
                  "
                  class="flex flex_center"
                >
                  <template
                    v-for="(item, index) in orderForm.productBase.tagDataList
                      .length > 0
                      ? orderForm.productBase.tagDataList[tagIndex]
                          .layerDataList
                      : false"
                  >
                    <li
                      v-if="index === 0"
                      :key="item.layerClientCode"
                      :class="layerIndex === index ? 'on' : ''"
                      @click="layerChange(index)"
                    >
                      印刷表面
                    </li>
                    <li
                      v-else
                      :key="item.layerClientCode"
                      :class="layerIndex === index ? 'on' : ''"
                      @click="layerChange(index)"
                    >
                      <span>印刷层{{ index }}</span>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
            <!--   尺寸，印刷，颜色   -->
            <div class="tagsRgBox pt16">
              <div class="tabBox">
                <ul class="flex">
                  <!-- <li
                    :class="tabsIndex === 0 ? 'on' : ''"
                    @click="tabChange(0)"
                  >
                    尺寸
                  </li> -->
                  <li
                    v-if="false"
                    :class="tabsIndex === 2 ? 'on' : ''"
                    @click="tabChange(2)"
                  >
                    颜色
                  </li>
                </ul>
              </div>
              <div class="tabCon">
                <!-- 尺寸   -->
                <div v-if="tabsIndex === 0">
                  <div class="cTitle">
                    <h3>标签属性</h3>
                  </div>
                  <div class="formItem">
                    <el-form-item label="标签形状">
                      <el-select
                        filterable
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex].tagShape
                        "
                        placeholder="请选择标签形状"
                        clearable
                        size="mini"
                        :disabled="isDisable"
                        @change="shpeChange"
                      >
                        <el-option
                          v-for="item in tagShapeList"
                          :key="item.objectCode"
                          :label="item.objectName"
                          :value="item.objectCode"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="长度">
                      <el-input
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex].tagWidth
                        "
                        v-toFixed="3"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="宽度">
                      <el-input
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex].tagHeight
                        "
                        v-toFixed="3"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="R角">
                      <el-input
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex]
                            .tagBorderRadius
                        "
                        v-toFixed="3"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="边空">
                      <el-input
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex].tagBorder
                        "
                        v-toFixed="3"
                        placeholder="请输入长度"
                        size="mini"
                        :disabled="isDisable"
                      >
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="cTitle">
                    <h3>印刷</h3>
                  </div>
                  <div class="formItem mt8">
                    <el-form-item label="标签类型">
                      <el-select
                        filterable
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex].tagType
                        "
                        placeholder="请选择标签类型"
                        clearable
                        size="mini"
                        :disabled="isDisable"
                        @change="handleTagChange"
                      >
                        <el-option
                          v-for="item in labelTypeLists"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="被贴物">
                      <el-input
                        v-model="
                          orderForm.productBase.tagDataList[tagIndex]
                            .postedContent
                        "
                        placeholder="请输入被贴物"
                        size="mini"
                        :disabled="isDisable"
                      />
                    </el-form-item>
                  </div>
                  <template>
                    <div
                      v-for="(layer, index) in orderForm.productBase
                        .tagDataList[tagIndex].layerDataList"
                      :key="layer.layerClientCode"
                    >
                      <div class="cTitle">
                        <h3 v-if="index === 0">印刷表面</h3>
                        <h3 v-else class="flex flex_between">
                          <span>印刷层{{ index }}</span>
                          <span
                            v-if="!isDisable"
                            class="pointer"
                            @click="deleteLayer(index)"
                            ><i class="el-icon-delete"
                          /></span>
                        </h3>
                      </div>
                      <div class="formItem">
                        <el-form-item label="材料">
                          <el-select
                        filterable
                            v-model="layer.printingMaterial"
                            placeholder="请选择材料"
                            clearable
                            size="mini"
                            filterable
                            :disabled="isDisable"
                            @change="handleCLChange"
                          >
                            <el-option
                              v-for="item in printMaterials"
                              :key="item.objectCode"
                              :label="item.objectName"
                              :value="item.objectCode"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item v-if="index === 0" label="表面要求">
                          <el-select
                        filterable
                            v-model="layer.surfaceRequireList"
                            placeholder="请选择表面要求"
                            multiple
                            size="mini"
                            filterable
                            :disabled="isDisable"
                            @change="handleYQChange"
                          >
                            <el-option
                              v-for="item in requireDataLists"
                              :key="item.objectCode"
                              :label="item.objectName"
                              :value="item.objectCode"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="底膜颜色">
                          <el-select
                        filterable
                            v-model="layer.baseFilmColor"
                            placeholder="请选择颜色"
                            clearable
                            size="mini"
                            filterable
                            :disabled="isDisable"
                            @change="handleDMChange"
                          >
                            <el-option
                              v-for="item in baseFilmColorLists"
                              :key="item.colorCode"
                              :label="item.colorName"
                              :value="item.colorCode"
                            />
                          </el-select>
                        </el-form-item>
                        <template v-if="index === 0">
                          <el-form-item
                            v-if="
                              orderForm.productBase.tagDataList[tagIndex]
                                .tagType === 1 ||
                              orderForm.productBase.tagDataList[tagIndex]
                                .tagType === 3
                            "
                            label="刮开涂层颜色"
                          >
                            <el-select
                        filterable
                              v-model="layer.scrapingCoatingColor"
                              placeholder="请选择颜色"
                              clearable
                              filterable
                              size="mini"
                              :disabled="isDisable"
                              @change="handleTCChange"
                            >
                              <el-option
                                v-for="item in baseFilmColorLists"
                                :key="item.colorCode"
                                :label="item.colorName"
                                :value="item.colorCode"
                              />
                            </el-select>
                          </el-form-item>
                        </template>
                        <template v-if="index === 0">
                          <el-form-item
                            v-if="
                              orderForm.productBase.tagDataList[tagIndex]
                                .tagType === 1 ||
                              orderForm.productBase.tagDataList[tagIndex]
                                .tagType === 3
                            "
                            label="刮开文字颜色"
                          >
                            <el-select
                        filterable
                              v-model="layer.scrapingWordColor"
                              placeholder="请选择颜色"
                              clearable
                              filterable
                              size="mini"
                              @change="handleTextColorChange"
                              :disabled="isDisable"
                            >
                              <el-option
                                v-for="item in baseFilmColorLists"
                                :key="item.colorCode"
                                :label="item.colorName"
                                :value="item.colorCode"
                              />
                            </el-select>
                          </el-form-item>
                        </template>
                        <el-form-item label="数码位数">
                          <div class="flex">
                            <div class="mr10">
                              <el-switch
                                v-model="layer.isHaveTechno"
                                @change="HaveTechnoChange(layer)"
                                active-color="#3F61F1FF"
                                inactive-color="#D2D5DAFF"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="isDisable"
                              />
                            </div>
                            <div class="flex1">
                              <el-input
                                v-model="layer.technoPlaces"
                                placeholder="请输入数码位数"
                                size="mini"
                                :disabled="
                                  isDisable ||
                                  !Boolean(Number(layer.isHaveTechno))
                                "
                                type="number"
                              />
                            </div>
                          </div>
                        </el-form-item>

                        <el-form-item label="数码颜色">
                          <el-select
                        filterable
                            v-model="layer.technoColor"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option label="黑码" :value="0"> </el-option>
                            <el-option label="彩码" :value="1"> </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="条码位数">
                          <div class="flex">
                            <div class="mr10">
                              <el-switch
                                v-model="layer.isHaveBarCode"
                                active-color="#3F61F1FF"
                                inactive-color="#D2D5DAFF"
                                @change="HaveBarCodeChange(layer)"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="isDisable"
                              />
                            </div>
                            <div class="flex1">
                              <el-input
                                v-model="layer.barCodePlaces"
                                placeholder="请输入条码位数"
                                size="mini"
                                :disabled="
                                  isDisable ||
                                  !Boolean(Number(layer.isHaveBarCode))
                                "
                                type="number"
                              />
                            </div>
                          </div>
                        </el-form-item>
                        <el-form-item label="是否留胶">
                          <div class="flex">
                            <div class="mr10">
                              <el-switch
                                v-model="layer.isLiuJiao"
                                active-color="#3F61F1FF"
                                inactive-color="#D2D5DAFF"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="isDisable"
                              />
                            </div>
                            <div class="flex1">
                              <el-select
                        filterable
                                v-model="layer.liuJiaoTexture"
                                placeholder="请选择留胶材质"
                                clearable
                                size="mini"
                                :disabled="
                                  isDisable || !Boolean(Number(layer.isLiuJiao))
                                "
                              >
                                <el-option
                                  v-for="item in liuJiaoDataLists"
                                  :key="item.objectCode"
                                  :label="item.objectName"
                                  :value="item.objectCode"
                                />
                              </el-select>
                            </div>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </template>
                  <!--   新增印刷层Button -->
                  <div class="newLayeeCon">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-plus"
                      :disabled="isDisable"
                      @click="addLayer"
                      >新增底层
                    </el-button>
                  </div>
                </div>
                <!-- 颜色   -->
                <div v-if="tabsIndex === 2">
                  <ul
                    v-if="
                      orderForm.productBase.tagDataList[tagIndex].colorDataList
                        .length > 0
                    "
                    class="colorList"
                  >
                    <template>
                      <li
                        v-for="(cl, index) in orderForm.productBase.tagDataList[
                          tagIndex
                        ].colorDataList"
                        :key="index"
                      >
                        <div class="flex flex_between pt16">
                          <div class="fName fw pl16">{{ cl.colorName }}</div>
                          <div v-if="!isDisable" class="pr16">
                            <span
                              class="pointer mr5"
                              @click="editColor(cl, index)"
                              ><i class="el-icon-edit-outline"
                            /></span>
                            <span class="pointer" @click="colorDelete(index)"
                              ><i class="el-icon-delete"
                            /></span>
                          </div>
                        </div>
                        <div class="colorCon">
                          <div>备注: {{ cl.colorRemark }}</div>
                          <div class="C_999aaa">
                            参考: {{ getColorReference(cl.colorReference) }}
                          </div>
                          <div class="C_999aaa">
                            所属层:
                            <template>
                              <span
                                v-for="m in getPrintingLayerName(
                                  cl.layerClientCodeList
                                )"
                                :key="m"
                                class="mr5"
                                >{{ m }}</span
                              >
                            </template>
                          </div>
                        </div>
                      </li>
                    </template>
                  </ul>
                  <!--   新增印刷颜色Button -->
                  <div class="newLayeeCon">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-plus"
                      :disabled="isDisable"
                      @click="addColor"
                      >新增印刷颜色
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 客户名册--dialog   -->
    <el-dialog
      title="客户名册"
      :visible.sync="isCustomerInfo"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <div class="plop">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="newAddCustomer"
              >新建
            </el-button>
          </div>
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="cusSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                :loading="cusLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="cusLoading"
                element-loading-spinner="el-icon-loading"
                @click="getAllCusList"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder not pt0" style="padding: 16px">
          <el-table
            v-loading="cusLoading"
            :data="cusDataLists"
            border
            :row-class-name="tableRowClassName"
            height="400"
            style="width: 100%"
          >
            <el-table-column
              prop="customerCode"
              label="客户编号"
              min-width="110"
            />
            <el-table-column
              prop="customerName"
              label="客户名称"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="customerStateName"
              label="客户状态"
              min-width="100"
            />
            <el-table-column
              prop="belongToSalesmanName"
              label="销售代表"
              min-width="90"
            />
            <el-table-column
              prop="customerRemark"
              label="客户描述"
              min-width="70"
            />
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="customerSelecd(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 S-->
          <div class="d_pag">
            <pagination
              :total="total || 0"
              :page.sync="cusSearch.pageIndex"
              :limit.sync="cusSearch.pageSize"
              @pagination="getAllCusList"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 新建客户   -->
    <el-dialog
      title="新建客户"
      :visible.sync="isAddCus"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeCusDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="customerForm"
          :model="customerForm"
          :rules="cusRules"
          label-width="90px"
          class="dialogForm"
        >
          <el-form-item label="客户编号">
            <el-input
              v-model="customerForm.customerCode"
              placeholder="系统自动生成"
              size="mini"
              disabled
            />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input
              v-model="customerForm.customerName"
              placeholder="请输入客户名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="结算方式" prop="settlementWay">
            <el-select
                        filterable
              v-model="customerForm.settlementWay"
              filterable
              placeholder="请选择结算方式"
              clearable
              size="mini"
            >
              <el-option label="现结" value="1" />
              <el-option label="月结" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="销售代表" prop="belongToSalesmanName">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input
                  v-model="customerForm.belongToSalesmanName"
                  placeholder="选择人员"
                  size="mini"
                  disabled
                />
              </div>
              <div class="ml10 btnPer">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-user"
                  @click="isperShow = true"
                  >选择人员</el-button
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="customerForm.contactPerson"
              placeholder="请输入联系人"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="customerForm.contactMobile"
              placeholder="请输入联系电话"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="客户地址">
            <el-cascader
              v-model="customerForm.areas"
              size="mini"
              :options="address"
              :props="{ label: 'areaName', value: 'areaCode' }"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input
              v-model="customerForm.customerAddress"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input
              v-model="customerForm.customerRemark"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddCus = false">取 消</el-button>
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addSave"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 合同选择--dialog   -->
    <el-dialog
      title="合同管理"
      :visible.sync="isContractInfo"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <div class="plop">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="uploadContract"
              >上传合同
            </el-button>
          </div>
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="contractSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                v-loading="cusLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="cusLoading"
                element-loading-spinner="el-icon-loading"
                @click="getContractList"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder pt0" style="padding: 16px">
          <el-table
            v-loading="cusLoading"
            :data="contractLists"
            border
            height="500"
            :row-class-name="tableRowClassNamecontrac"
            style="width: 100%"
          >
            <!-- <el-table-column width="55" fixed>
              <template slot-scope="scope">
                <el-radio
                  v-model="radioContractSelect"
                  :label="scope.row.contractCode"
                  @change.native.stop="
                    (e) => handleContractRadioChange(e, scope.row)
                  "
                  >{{ " " }}
                </el-radio>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="contractName"
              label="合同名称"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column
              prop="contractCode"
              label="合同代码"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="contractNo"
              label="合同编号"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="contractBeginDate"
              label="开始日期"
              min-width="100"
            >
              <template slot-scope="{ row }">
                {{ parseTime(row.contractBeginDate, "{y}-{m}-{d}") }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contractEndDate"
              label="结束日期"
              min-width="100"
            >
              <template slot-scope="{ row }">
                {{ parseTime(row.contractEndDate, "{y}-{m}-{d}") }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contractAmount"
              label="合同金额"
              min-width="100"
            />
            <el-table-column
              prop="contractSigningDate"
              label="签约时间"
              min-width="100"
            >
              <template slot-scope="{ row }">
                {{ parseTime(row.contractSigningDate, "{y}-{m}-{d}") }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contractSigningPersonName"
              label="签约人"
              min-width="90"
            />
            <el-table-column
              prop="contractRemark"
              label="备注"
              min-width="150"
            />
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="contractSelecd(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isContractInfo = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="contractSelecd"
          >确定
        </el-button>
      </div> -->
    </el-dialog>
    <!-- 新建合同   -->
    <el-dialog
      title="上传合同"
      :visible.sync="isAddContractDialog"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
      @close="closeContractDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="contractForm"
          :model="contractForm"
          :rules="contractRules"
          label-width="110px"
          class="dialogForm dialogInlineForm"
        >
          <el-form-item label="合同名称" prop="contractName">
            <el-input
              v-model="contractForm.contractName"
              placeholder="请输入合同名称"
              size="mini"
              clearable
            />
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNo">
            <el-input
              v-model="contractForm.contractNo"
              placeholder="请输入合同编号"
              size="mini"
              clearable
            />
          </el-form-item>
          <el-form-item label="合同金额(元)">
            <el-input
              v-model="contractForm.contractAmount"
              placeholder="请输入合同金额"
              size="mini"
              clearable
            />
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="contractForm.contractBeginDate"
              type="date"
              size="mini"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="contractForm.contractEndDate"
              type="date"
              size="mini"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="签约日期">
            <el-date-picker
              v-model="contractForm.contractSigningDate"
              type="date"
              size="mini"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="签约人">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input
                  v-model="contractForm.contractSigningPersonName"
                  placeholder="选择人员"
                  size="mini"
                  disabled
                />
              </div>
              <div class="ml10 btnPer">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-user"
                  @click="isperShow = true"
                  >选择人员</el-button
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="合同文件">
            <el-upload
              class="avatar-uploader"
              action=" "
              :show-file-list="false"
              :http-request="myUpload"
            >
              <div class="flex c_3F61F1">
                <i class="iconfont uploadIco mr5" /><span>上传文件</span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label=" ">
            <div v-if="contractForm.file.fileSize" class="thumbnailBox flexs">
              <div class="icoBox">
                <template v-if="contractForm.file.fileType === '.pdf'">
                  <div class="fileIco f22">
                    <i class="iconfont pdfIco f22" />
                  </div>
                </template>
                <template
                  v-else-if="
                    contractForm.file.fileType === '.xls' ||
                    contractForm.file.fileType === '.xlsx' ||
                    contractForm.file.fileType === '.csv'
                  "
                >
                  <div class="fileIco f22" style="background: #54a55b">
                    <i class="iconfont ecelIco f22" />
                  </div>
                </template>
                <template
                  v-else-if="
                    contractForm.file.fileType === '.doc' ||
                    contractForm.file.fileType === '.docx'
                  "
                >
                  <div class="fileIco f22" style="background: #409eff">
                    <i class="iconfont wordIco f22" />
                  </div>
                </template>
                <template
                  v-else-if="
                    contractForm.file.fileType === '.ppt' ||
                    contractForm.file.fileType === '.pptx'
                  "
                >
                  <div class="fileIco f22">
                    <i class="iconfont pptIco f22" />
                  </div>
                </template>
                <template
                  v-else-if="
                    contractForm.file.fileType === '.zip' ||
                    contractForm.file.fileType === '.rar'
                  "
                >
                  <div class="fileIco f22">
                    <i class="iconfont zipIco f22" />
                  </div>
                </template>
                <template
                  v-else-if="
                    contractForm.file.fileType === '.jpg' ||
                    contractForm.file.fileType === '.jpeg' ||
                    contractForm.file.fileType === '.png' ||
                    contractForm.file.fileType === '.bmp' ||
                    contractForm.file.fileType === '.ico'
                  "
                >
                  <div class="fileIco f22">
                    <i class="iconfont imgIco f22" />
                  </div>
                </template>
                <template v-else>
                  <div class="fileIco f22">
                    <i class="iconfont otherFileIco f22" />
                  </div>
                </template>
              </div>
              <div class="uploadTxt">
                <div class="f12 fw">
                  {{ contractForm.file.originalFileName }}
                </div>
                <div class="C_999aaa">
                  {{ convertBytes(contractForm.file.fileSize) }}
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input
              v-model="contractForm.contractRemark"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddContractDialog = false"
          >取 消</el-button
        >
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addContractSave"
          >保存
        </el-button>
      </div>
    </el-dialog>
    <!-- 人员选择弹框   -->
    <per-redio-dialog
      :per-visible.sync="isperShow"
      @getEmployee="getEmployee"
    />
    <!-- 新增颜色   -->
    <el-dialog
      title="新增颜色"
      :visible.sync="isAddColor"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeColorDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="colorForm"
          :model="colorForm"
          :rules="colorRules"
          label-width="90px"
          class="dialogForm"
        >
          <el-form-item label="颜色名称" prop="colorName">
            <el-input
              v-model="colorForm.colorName"
              placeholder="请输入颜色名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="颜色参考" prop="colorReference">
            <el-select
                        filterable
              v-model="colorForm.colorReference"
              filterable
              placeholder="请选择颜色参考"
              clearable
              size="mini"
            >
              <el-option label="彩稿" :value="1" />
              <el-option label="样表" :value="2" />
              <el-option label="封样" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属层" prop="LayerClientCodeList">
            <el-select
                        filterable
              v-model="colorForm.layerClientCodeList"
              multiple
              placeholder="请选择所属层"
              clearable
              size="mini"
            >
              <el-option
                v-for="item in orderForm.productBase.tagDataList[tagIndex]
                  .layerDataList"
                :key="item.layerClientCode"
                :label="item.printingLayerName"
                :value="item.layerClientCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="颜色备注" class="mt12">
            <el-input
              v-model="colorForm.colorRemark"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddColor = false">取 消</el-button>
        <el-button
          v-if="colorOps === 'add'"
          type="primary"
          size="mini"
          @click="continueAdd"
          >继续添加</el-button
        >
        <el-button
          v-if="colorOps === 'add'"
          type="primary"
          size="mini"
          @click="saveAddColor"
          >保存</el-button
        >
        <el-button
          v-if="colorOps === 'modify'"
          type="primary"
          size="mini"
          @click="saveEditColor"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import perRedioDialog from "@/components/perDialogRedio";
import intelligenceButton from "./components/orderIntelligence";
import materialButton from "./components/orderMaterial";
import Pagination from "@/components/Pagination";
import { uuid } from "vue-uuid";
import { mapGetters } from "vuex";
import { formatbytes, parseTime, accMul, accAdd } from "@/utils";

export default {
  name: "",
  components: {
    perRedioDialog,
    intelligenceButton,
    materialButton,
    Pagination,
  },
  computed: {
    ...mapGetters(["userInfo"]),
    // 标签类型
    // getTagType() {
    //   const tagTypeCode = this.orderForm.productBase.tagDataList[this.tagIndex].tagType
    //   const obj = this.labelTypeLists.find((item) => item.code === tagTypeCode)
    //   return obj && obj.name || ''
    // },
    // 印刷材料
    getPrintingMaterial() {
      const objectCode =
        (this.orderForm.productBase.tagDataList[this.tagIndex] &&
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[
            this.layerIndex
          ].printingMaterial) ||
        [];
      const obj = this.printMaterials.find(
        (item) => item.objectCode === objectCode
      );
      return (obj && obj.objectName) || "";
    },
    // 表面要求
    getSurfaceRequireList() {
      const objectCode =
        (this.orderForm.productBase.tagDataList[this.tagIndex] &&
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[
            this.layerIndex
          ].surfaceRequireList) ||
        [];
      const newArry = [];
      objectCode.forEach((item) => {
        const obj = this.requireDataLists.find((m) => m.objectCode === item);
        if (obj) {
          newArry.push(obj.objectName);
        }
      });
      return newArry;
    },
    // 底膜颜色
    getBottomColor() {
      const colorCode =
        (this.orderForm.productBase.tagDataList[this.tagIndex] &&
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[
            this.layerIndex
          ].baseFilmColor) ||
        [];
      const obj = this.baseFilmColorLists.find(
        (item) => item.colorCode === colorCode
      );
      return (obj && obj.colorName) || "";
    },
    // 刮开涂层颜色
    getScrapingCoatingColor() {
      const colorCode =
        (this.orderForm.productBase.tagDataList[this.tagIndex] &&
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[
            this.layerIndex
          ].scrapingCoatingColor) ||
        [];
      const obj = this.baseFilmColorLists.find(
        (item) => item.colorCode === colorCode
      );
      return (obj && obj.colorName) || "";
    },
    // 刮开文字颜色
    getScrapingWordColor() {
      const colorCode =
        (this.orderForm.productBase.tagDataList[this.tagIndex] &&
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[
            this.layerIndex
          ].scrapingWordColor) ||
        [];
      const obj = this.baseFilmColorLists.find(
        (item) => item.colorCode === colorCode
      );
      return (obj && obj.colorName) || "";
    },
  },
  data() {
    return {
      orderNo: "",
      tabsIndex: 0, // 右侧tabs切换索引
      tagIndex: 0, // 当前标签索引
      layerIndex: 0, // 当前标签下面的当前印刷层
      colorOps: "add", // 印刷颜色当前操作
      checkID: "",
      packingUnitLable: "张",
      packingUnit: "套",
      colorEditIndex: null, // 印刷颜色修改的索引
      dataLoading: false, // 订单详情数据加载
      orderLoading: false, // 订单保存加载效果
      choicePersonnelType: "customer", // 人员选择类型
      isAddColor: false, // 印刷颜色新增弹框是否打开
      isAddContractDialog: false, // 上传合同弹框是否打开
      isContractInfo: false, // 查找合同弹框是否打开
      isAddCus: false, // 新建客户弹框是否打开
      addLoading: false, // 新建客户保存按钮加载效果
      isperShow: false, // 人员选择弹框是否打开
      isCustomerInfo: false, // 客户名册弹框是否显示
      cusLoading: false, // 客户列表加载效果
      moneyAuthority: {
        taoZhuangPrice: 0,
        orderMoney: 0,
        actualPrice: 0,
        practicalPayMoney: 0,
        discountsMoney: 0,
      },
      // 设置时间控件小于当前日期不能选择
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      tagShapeClass: "", // 对应标签形状的class
      tagShapeList: [], // 标签形状集合
      disable: false,
      customerForm: {
        customerCode: "系统自动生成",
        customerName: "",
        settlementWay: "",
        belongToSalesman: "",
        belongToSalesmanName: "",
        contactPerson: "",
        contactMobile: "",
        areas: [],
        province: "",
        city: "",
        country: "",
        customerAddress: "",
        customerRemark: "",
      }, // 新建客户表单
      cusSearch: {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        pageIndex: 1,
        pageSize: 10,
      },
      cusDataLists: [], // 客户列表数据
      address: [], // 地址联动数据
      radioCusSelect: null, // 客户名册单选值
      currentCuslistRow: {}, // 客户名册当前选中行
      contractSearch: {
        customerCode: "",
        likeWords: "",
      },
      labelTypeLists: [
        { name: "刮开", code: 1 },
        { name: "揭开", code: 2 },
        { name: "刮开+揭开", code: 3 },
        { name: "印刷", code: 4 },
      ], // 标签类型
      printMaterials: [], // 印刷材料列表
      requireDataLists: [], // 表面要求列表
      baseFilmColorLists: [], // 底膜颜色列表
      liuJiaoDataLists: [], // 留胶材质列表
      orderForm: {
        isCreateNewOrder: "",
        excuteAction: "",
        baseData: {
          orderID: 0,
          orderNo: "",
          oldOrderNo: "",
          agreementNo: "",
          orderType: "",
          customerCode: "",
          calculationMethod: 0,
          contractCode: "", // 合同唯一码
          contractNo: "", // 合同编码
          customerBillNo: "",
          productCode: "",
          orderProductName: "", // 订单号+产品名称
          expectedDeliveryTime: "",
          printingSurface: "",
          orderRemark: "",
          productVersions: "",
          taoZhuangQuantity: 1,
          tagSumQuantity: 1,
          taoZhuangPrice: "", // 套装单价
          orderMoney: "",
          actualPrice: "", // 实际单价
          practicalPayMoney: "",
          tagDataQuantity: "", // 数据数量
          discountsMoney: "",
          productUnion: "", // 产品单位：套，枚
          salesmanNo: "", // 订单业务人员（订单创建人员）
          salesmanName: "", // 订单业务人员（显示名）
          salesmanMobile: "", // 业务员联系电话
        },
        productBase: {
          orderProductID: 0, // 订单产品主键ID
          productCode: "",
          productCode: "",
          productName: "",
          orderProductName: "", // 订单号+产品名称
          customerCode: "",
          customerName: "",
          newVersion: "", // 新版递增值
          updateVersion: "", // 改版递增值
          tagCount: "", // 套标数量（标签个数）
          orderProductPrice: "", // 等于套装单价
          productStyle: 2,

          tagAffixWay: 2,
          outDirection: 1,
          scrollDirection: 1,
          mandrelSize: "",
          notOverDiameter: "", // 外直径不超过
          pageEqualTags: "",
          packageEqualPages: 1,
          boxEqualPackages: "",
          boxEqualTags: "", // 每箱共计X枚数
          tagDataList: [
            {
              tagClientCode: uuid.v4(), // 标签前端唯一码
              productTagID: 0,
              productTagCode: "",
              productCode: "",
              productTagName: "大标",
              comparisonObject: 0,
              comparisonObjectName: "", // 引用标签名称
              percentageValue: 1,
              matchQuantity: 1,
              parentNum: 1,
              productTagPrice: "",
              tagShape: "TagShape1",
              tagWidth: "", // 标签长度
              tagHeight: "",
              tagBorderRadius: "", // R角
              tagBorder: "", // 边空
              tagType: 4, // 标签类型
              postedContent: "", // 被贴物
              layerDataList: [
                // 印刷层集合
                {
                  layerClientCode: uuid.v1(), // 标签印刷层前端唯一码
                  printingLayerID: "", // 标签印刷层主键ID
                  printingLayerCode: "", // 标签印刷层代码
                  productTagCode: "", // 产品标签代码
                  isSurfaceLayer: 1, // 是否为表面层1是；0否
                  printingLayerName: "印刷表面",
                  printingMaterial: "", // 印刷材料
                  surfaceRequireList: [], // 表面要求
                  baseFilmColor: "",
                  scrapingCoatingColor: "",
                  scrapingWordColor: "",
                  isHaveTechno: 0, // 是否有数码 0否；1是
                  technoPlaces: "", // 数码位数
                  isHaveBarCode: 0, // 是否有条码 0否；1是
                  barCodePlaces: "", // 条码位数
                  isLiuJiao: 1, // 是否留胶：1是；0否
                  liuJiaoTexture: "", // 留胶材质
                },
              ], // 标签印刷底层数
              colorDataList: [], // 印刷色数据列表
            },
          ],
        },
      },
      total: "",
      colorForm: {
        layerClientCodeList: [], // 产品标签印刷层唯一码
        printingColorID: 0,
        printingColorCode: "",
        productTagCode: "",
        printingLayerCode: "",
        colorName: "",
        colorReference: 1, // 颜色参考：1彩稿；2样表；3封样
        colorRemark: "",
      }, // 印刷颜色表单
      currentContractlistRow: {}, // 合同号
      orderTypeList: [], //订单类型数据
      contractLists: [], // 客户合同列表数据
      radioContractSelect: null, // 客户合同单选值
      contractForm: {
        customerCode: "",
        contractNo: "",
        contractName: "",
        contractAmount: "",
        contractBeginDate: "",
        contractEndDate: "",
        contractSigningDate: "",
        contractSigningPerson: "",
        contractSigningPersonName: "",
        contractRemark: "",
        originalFileName: "",
        file: {
          fileType: "",
          fileSize: "",
          originalFileName: "",
          fileUrl: "",
          fileName: "",
          appendixPreview: "",
        },
      },
      isDisable: false, // 是否禁用输入框
      rules: {
        "productBase.customerName": [
          { required: true, message: "请选择客户", trigger: "change" },
        ],
        "baseData.orderType": [
          { required: true, message: "请选择订单类型", trigger: "change" },
        ],
        "productBase.orderProductName": [
          {
            required: true,
            message: "请输入产品名称",
            trigger: ["change", "blur"],
          },
        ],
      },
      cusRules: {
        customerName: [
          { required: true, message: "客户名称必填", trigger: "change" },
        ],
        settlementWay: [
          { required: true, message: "请选择结算方式", trigger: "change" },
        ],
        belongToSalesmanName: [
          { required: true, message: "请选择销售代表", trigger: "change" },
        ],
      },
      contractRules: {
        originalFileName: [
          { required: true, message: "请上传资质", trigger: "change" },
        ],
        contractName: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: ["change", "blur"],
          },
        ],
        contractNo: [
          {
            required: true,
            message: "请输入合同编号",
            trigger: ["change", "blur"],
          },
        ],
      },
      colorRules: {
        colorName: [
          {
            required: true,
            message: "请输入颜色名称",
            trigger: ["change", "blur"],
          },
        ],
        layerClientCodeList: [
          { required: true, message: "请选择所属层", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.orderForm.isCreateNewOrder = this.$route.query.isCreateNewOrder;
    this.orderForm.excuteAction = this.$route.query.excuteAction;
    if (this.$route.query.excuteAction == "老版") {
      this.isDisable = true;
    }

    // 地区联动数据
    this.getArea();
    // 得到标签形状数据列表
    this.getShapeList();
    // 得到印刷材料
    this.getPrintingMaterials();
    // 得到表面要求
    this.getRequireDataList();
    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    this.getColorList();
    // 留胶材质列表
    this.getLiuJiaoList();

    this.getorderType();
  },
  deactivated() {
    localStorage.removeItem("orderInit");
  },
  beforeDestroy() {
    localStorage.removeItem("orderInit");
  },
  mounted() {
    this.orderForm.baseData.salesmanNo = this.userInfo.employeeCode;
    this.orderForm.baseData.salesmanName = this.userInfo.employeeName;
    this.orderForm.baseData.salesmanMobile = this.userInfo.mobile;
    console.log(666);
    if (
      (this.$route.query.isCreateNewOrder == "true" ||
        this.$route.query.isCreateNewOrder == true) &&
      this.$route.query.excuteAction === "初版"
    ) {
      // 初始化订单数据
      this.getInitOrder();
    } else {
      // 得到订单详情数据
      this.getOderDetail();
    }
  },
  methods: {
    //获取订单类型
    getorderType() {
      this.$api.business.GetSaleOrderTypeDataList().then((res) => {
        this.orderTypeList = res;
      });
    },

    parseTime(time, cFormat) {
      return parseTime(time, cFormat);
    },
    // 开单保存
    saveOrder() {
      this.orderForm.productBase.tagCount =
        this.orderForm.productBase.tagDataList.length;
      this.orderForm.baseData.printingSurface = this.$route.query.excuteAction;
      this.orderForm.baseData.productUnion =
        this.orderForm.productBase.tagDataList.length > 1 ? "套" : "枚";
      this.orderForm.productBase.tagDataList.forEach((item) => {
        item.percentageValue = item.matchQuantity;
      });
      const parmas = this.orderForm;
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          this.orderLoading = true;
          this.$api.business
            .SureCreateSaleOrder(parmas)
            .then(() => {
              this.orderLoading = false;
              this.$message({
                message: "保存成功",
                type: "success",
              });
              if (this.$route.query.comeFrom === "cusOrder") {
                this.$router.push({
                  path: "/business/customerInfo",
                  query: {
                    customerID: this.$route.query.customerID,
                    customerCode: this.$route.query.customerCode,
                    tabIndex: 1,
                  },
                });
              } else {
                this.$router.push({
                  path: "/business/placeAnOrder",
                });
              }
            })
            .catch(() => {
              this.orderLoading = false;
            });
        } else {
          this.$message({
            message: "请检查所有必填字段是否填完",
            type: "warning",
          });
        }
      });
    },
    // 得到订单详情数据
    getOderDetail(callback) {
      const parmas = {
        saleOrderID: this.$route.query.orderID,
      };
      this.dataLoading = true;
      this.$api.business
        .GetSaleOrderDetail(parmas)
        .then((res) => {
          this.dataLoading = false;
          this.orderForm.baseData = res.baseData;
          this.orderForm.stockQuantity = res.stockQuantity;
          for (let i in res.baseData) {
            for (let j in this.moneyAuthority) {
              if (i == j) {
                if (res.baseData[i] < 0) {
                  this.moneyAuthority[j] = "暂无权限查看";
                }
              }
            }
          }
          this.orderForm.productBase = res.productData;
          if (
            (this.$route.query.isCopy == true ||
              this.$route.query.isCopy == "true") &&
            this.$route.query.excuteAction == "老版"
          ) {
            this.orderNo = res.baseData.oldOrderNo;
          } else {
            this.orderNo = res.baseData.orderNo;
          }
          this.contractForm.customerCode = res.baseData.customerCode;
          // 修改得时候
          if (
            this.$route.query.isCreateNewOrder == false ||
            this.$route.query.isCreateNewOrder == "false"
          ) {
            // 初始化订单资质，订单资料数据
            this.$nextTick(() => {
              this.$refs.intellList.getIntelligenceLisNum();
              this.$refs.materialList.getMaterialListInit();
            });
          }

          if (this.$route.query.isCopy) {
            this.orderForm.baseData.xieYiShuHao = "";
            this.orderForm.baseData.expectedDeliveryTime = "";
          }

          if (
            this.$route.query.isCreateNewOrder == true ||
            this.$route.query.isCreateNewOrder == "true"
          ) {
            // 初始化订单数据，非修改情况下调用
            this.getInitOrder();
          }

          // 标签形状方法
          this.shpeChange();
          if (callback) {
            callback();
          }

          console.log(this.orderForm);
        })
        .catch(() => {
          this.dataLoading = false;
        });
    },
    // 编辑印刷颜色保存事件
    saveEditColor() {
      this.$refs.colorForm.validate((valid) => {
        if (valid) {
          this.orderForm.productBase.tagDataList[this.tagIndex].colorDataList[
            this.colorEditIndex
          ] = { ...this.colorForm };
          this.isAddColor = false;
        }
      });
    },
    // 编辑印刷颜色点击事件
    editColor(item, index) {
      this.colorOps = "modify";
      this.colorEditIndex = index;
      this.colorForm = { ...item };
      this.isAddColor = true;
    },
    // 删除印刷颜色
    colorDelete(index) {
      this.orderForm.productBase.tagDataList[
        this.tagIndex
      ].colorDataList.splice(index, 1);
    },
    // 删除印刷层
    deleteLayer(index) {
      this.orderForm.productBase.tagDataList[
        this.tagIndex
      ].layerDataList.splice(index, 1);
    },
    // 标签印刷层名字
    getPrintingLayerName(arr) {
      return arr.map((item) => {
        const layerArr =
          this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList;
        const obj = layerArr.find((m) => {
          return m.layerClientCode === item;
        });
        return (obj && obj.printingLayerName) || "";
      });
    },
    // 颜色参考
    getColorReference(val) {
      if (val === 1) {
        return "彩稿";
      } else if (val === 2) {
        return "样表";
      } else {
        return "封样";
      }
    },
    // 新增颜色继续添加事件
    continueAdd() {
      this.$refs.colorForm.validate((valid) => {
        if (valid) {
          const parmas = { ...this.colorForm };
          this.orderForm.productBase.tagDataList[
            this.tagIndex
          ].colorDataList.push(parmas);
          this.closeColorDialog();
        }
      });
    },
    // 新增颜色弹框保存
    saveAddColor() {
      this.$refs.colorForm.validate((valid) => {
        if (valid) {
          const parmas = { ...this.colorForm };
          this.orderForm.productBase.tagDataList[
            this.tagIndex
          ].colorDataList.push(parmas);
          this.isAddColor = false;
        }
      });
    },
    // 新增印刷颜色按钮点击事件
    addColor() {
      this.colorOps = "add";
      this.isAddColor = true;
    },
    // 新增印刷层
    addLayer() {
      const index =
        this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList
          .length;
      const item = {
        layerClientCode: uuid.v1(), // 标签前端唯一码
        printingLayerID: "", // 标签印刷层主键ID
        printingLayerCode: "", // 标签印刷层代码
        productTagCode: "", // 产品标签代码
        isSurfaceLayer: 1, // 是否为表面层1是；0否
        printingLayerName: "印刷底层" + index,
        printingMaterial: "", // 印刷材料
        surfaceRequireList: [], // 表面要求
        baseFilmColor: "",
        scrapingCoatingColor: "",
        scrapingWordColor: "",
        isHaveTechno: 0, // 是否有数码 0否；1是
        technoPlaces: "", // 数码位数
        isHaveBarCode: 0, // 是否有条码 0否；1是
        barCodePlaces: "", // 条码位数
        isLiuJiao: 0, // 是否留胶：1是；0否
        liuJiaoTexture: "", // 留胶材质
      };
      this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList.push(
        item
      );
    },

    //标签类型选择事件
    handleTagChange(e){
      if(e == 2 || e == 4){
        this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList.forEach((item)=>{
          item.scrapingCoatingColor = ''
          item.scrapingWordColor = ''
        })
      }
      console.log(e)
    },

    //数码位数监听事件
    HaveTechnoChange(e) {
      if (!e.isHaveTechno) {
        e.technoPlaces = "";
      }
    },

    //条码位数开关监听事件
    HaveBarCodeChange(e) {
      console.log(e);
      if (!e.isHaveBarCode) {
        e.barCodePlaces = "";
      }
    },

    // 留胶材质列表
    getLiuJiaoList() {
      this.$api.business.QueryLiuJiaoTextureDataList().then((res) => {
        this.liuJiaoDataLists = res;
      });
    },
    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    getColorList() {
      const params = {
        colorType: 0,
        likeWords: "",
        useType: 1,
      };
      this.$api.business.QueryPrintingColorDataList(params).then((res) => {
        this.baseFilmColorLists = res;
      });
    },
    // 得到表面要求
    getRequireDataList() {
      this.$api.business.QuerySurfaceRequireDataList().then((res) => {
        this.requireDataLists = res;
      });
    },
    // 得到印刷材料
    getPrintingMaterials() {
      this.$api.business.QueryPrintingMaterialDataList().then((res) => {
        this.printMaterials = res;
      });
    },

    //包装信息计算方式选择事件
    handleSelectChange(val) {
      if (val == 0) {
        if (this.orderForm.productBase.pageEqualTags) {
          this.orderForm.productBase.pageEqualTags =
            1 / this.orderForm.productBase.pageEqualTags;
          this.orderForm.productBase.boxEqualTags =
            this.orderForm.productBase.pageEqualTags *
            this.orderForm.productBase.packageEqualPages *
            this.orderForm.productBase.boxEqualPackages;
        }
        this.packingUnitLable = "张";
        this.packingUnit = "套";
      } else if (val == 1) {
        if (this.orderForm.productBase.pageEqualTags) {
          this.orderForm.productBase.pageEqualTags =
            1 / this.orderForm.productBase.pageEqualTags;
          this.orderForm.productBase.boxEqualTags =
            (this.orderForm.productBase.packageEqualPages /
              this.orderForm.productBase.pageEqualTags) *
            this.orderForm.productBase.boxEqualPackages;
        }
        this.packingUnitLable = "套";
        this.packingUnit = "张";
      }
    },

    // 标签形状改变事件
    shpeChange() {
      const val =
        this.orderForm.productBase.tagDataList[this.tagIndex].tagShape;
      if (val === "TagShape1") {
        this.tagShapeClass = "rectangle";
      } else if (val === "TagShape2") {
        this.tagShapeClass = "square";
      } else if (val === "TagShape3") {
        this.tagShapeClass = "circular";
      } else if (val === "TagShape4") {
        this.tagShapeClass = "ellipse";
      } else if (val === "TagShape5") {
        this.tagShapeClass = "heteroideus";
      } else {
        this.tagShapeClass = "";
      }
    },
    // 得到标签形状数据列表
    getShapeList() {
      this.$api.business.QueryTagShapeDataList().then((res) => {
        this.tagShapeList = res;
      });
    },
    // 右侧tab切换
    tabChange(index) {
      this.tabsIndex = index;
    },
    // 印刷层切换事件
    layerChange(index) {
      this.layerIndex = index;
    },
    // 标签选项卡切换
    tagChoice(index) {
      let type = this.orderForm.productBase.tagDataList[index].tagType
      if(type == 2 || type == 4){
        this.orderForm.productBase.tagDataList[index].layerDataList.forEach((item)=>{
          item.scrapingCoatingColor = ''
          item.scrapingWordColor = ''
        })
      }
      this.tagIndex = index;
      this.layerIndex = 0;
      this.tabsIndex = 0;
      this.shpeChange();
    },
    // 选择业务员
    choniceSalesman() {
      this.choicePersonnelType = "salesman";
      this.isperShow = true;
    },
    // 上传合同保存事件
    addContractSave() {
      const parmas = this.contractForm;
      this.$refs.contractForm.validate((valid) => {
        if (valid) {
          this.addLoading = true;
          this.$api.business
            .UploadCustomerContract(parmas)
            .then(() => {
              this.addLoading = false;
              this.isAddContractDialog = false;
              this.getContractList();
              this.$message({
                message: "新建成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addLoading = false;
            });
        }
      });
    },
    // 新建客户点击事件
    newAddCustomer() {
      this.isAddCus = true;
      this.choicePersonnelType = "customer";
    },
    // 上传合同点击事件
    uploadContract() {
      this.isAddContractDialog = true;
      this.choicePersonnelType = "contract";
      this.contractForm.customerCode = this.orderForm.baseData.customerCode;
    },
    // 上传合同
    myUpload(e) {
      const file = e.file;
      // const type = file.name.substring(file.name.lastIndexOf('.') + 1)
      // const isLt2M = file.size / 1024 / 1024 < 2
      var formData = new FormData();
      formData.append("file", file);
      this.$api.common.UploadSingleFile(formData).then((res) => {
        this.contractForm.file.fileSize = res.fileSize;
        this.contractForm.file.originalFileName = res.originalName;
        this.contractForm.originalFileName = res.originalName;
        this.$forceUpdate();
        this.contractForm.file.fileType = res.fileExtension;
        this.contractForm.file.fileUrl = res.fileUrl;
        this.contractForm.file.fileName = res.fileName;
        this.contractForm.file.filePreview = res.appendixPreview || "";
      });
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val);
    },
    // 选择合同
    contractSelecd(row) {
      this.orderForm.baseData.contractNo = row.contractNo;
      this.orderForm.baseData.contractCode = row.contractCode;
      this.isContractInfo = false;
    },
    // 查找合同号
    selectedContract() {
      if (!this.orderForm.productBase.customerCode) {
        this.$message({
          message: "请先选择客户",
          type: "warning",
        });
        return;
      }
      // 客户合同列表数据
      this.getContractList();
      this.isContractInfo = true;
    },
    // 客户合同列表数据
    getContractList() {
      this.contractSearch.customerCode =
        this.orderForm.productBase.customerCode;
      const parmas = this.contractSearch;
      this.cusLoading = true;
      this.$api.business
        .QueryCustomersContracts(parmas)
        .then((res) => {
          this.contractLists = res;
          this.cusLoading = false;
        })
        .catch(() => {
          this.cusLoading = false;
        });
    },
    // 客户选择确认
    customerSelecd(row) {
      // let row = "";

      // this.cusDataLists.forEach((item) => {
      //   if (item.checked) {
      //     row = item;
      //   }
      // });
      this.checkID = row.customerID;
      // this.currentCuslistRow = Object.assign({}, row);
      this.contractForm.customerCode = row.customerCode;
      this.orderForm.baseData.customerCode = row.customerCode;
      this.orderForm.productBase.customerCode = row.customerCode;
      this.orderForm.productBase.customerName = row.customerName;
      this.isCustomerInfo = false;
      this.orderForm.baseData.contractNo = "";
    },
    // 新建客户保存
    addSave() {
      const parmas = this.customerForm;
      this.$refs.customerForm.validate((valid) => {
        if (valid) {
          this.addLoading = true;
          this.$api.business
            .CreateNewCustomer(parmas)
            .then(() => {
              this.addLoading = false;
              this.isAddCus = false;
              this.checkID = "";
              this.getAllCusList();
              this.$message({
                message: "新增成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addLoading = false;
            });
        }
      });
    },
    // 得到业务员/和合同签约人
    getEmployee(val) {
      if (this.choicePersonnelType === "customer") {
        this.customerForm.belongToSalesman = val.employeeCode;
        this.customerForm.belongToSalesmanName = val.employeeName;
      } else if (this.choicePersonnelType === "contract") {
        this.contractForm.contractSigningPerson = val.employeeCode;
        this.contractForm.contractSigningPersonName = val.employeeName;
      } else if (this.choicePersonnelType === "salesman") {
        this.orderForm.baseData.salesmanNo = val.employeeCode;
        this.orderForm.baseData.salesmanName = val.employeeName;
        this.orderForm.baseData.salesmanMobile = val.mobile;
      }
    },
    // 得到订单产品名称
    getOrderProductName() {
      this.orderForm.baseData.orderProductName =
        this.orderForm.productBase.productName;
    },
    // 选择地址
    areaChange(val) {
      this.customerForm.province = val ? val[0] : "";
      this.customerForm.city = val ? val[1] : "";
      this.customerForm.country = val ? val[2] : "";
    },
    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },
    // 客户列表
    getAllCusList() {
      const parmas = this.cusSearch;
      this.cusLoading = true;
      this.$api.business
        .QueryPageCustomerList(parmas)
        .then((res) => {
          this.cusDataLists = res.list;
          this.total = res.totalCount;
          this.cusLoading = false;
        })
        .catch(() => {
          this.cusLoading = false;
        });
    },
    // 选中客户点击事件
    seletedCustomer() {
      this.isCustomerInfo = true;
      // 客户列表
      this.getAllCusList();
    },
    // 客户合同单选事件
    handleContractRadioChange(e, row) {
      e.stopPropagation();
      this.currentContractlistRow = Object.assign({}, row);
    },
    // 给选中一行添加class
    tableRowClassName({ row }) {
      if (this.currentCuslistRow.customerCode === row.customerCode) {
        return "selectd";
      }
    },
    // 合同号选择行样式
    tableRowClassNamecontrac({ row }) {
      if (this.currentContractlistRow.contractCode === row.contractCode) {
        return "selectd";
      }
    },

    //成品样式选择事件
    handleStyleChange() {
      if (this.orderForm.baseData.calculationMethod == 0) {
        this.packingUnitLable = "张";
        this.packingUnit = "套";
      } else {
        this.packingUnitLable = "套";
        this.packingUnit = "张";
      }
    },

    // 计算产品包装，每箱共计多少枚
    getBoxEqualTags() {
      const pageEqualTagsNum = Number(this.orderForm.productBase.pageEqualTags);
      const packageEqualPagesNum = Number(
        this.orderForm.productBase.packageEqualPages
      );
      const boxEqualPackagesNum = Number(
        this.orderForm.productBase.boxEqualPackages
      );
      if (this.orderForm.productBase.productStyle !== 2) {
        this.orderForm.productBase.boxEqualTags =
          pageEqualTagsNum * packageEqualPagesNum * boxEqualPackagesNum;
        if (this.orderForm.baseData.calculationMethod == 0) {
          this.packingUnitLable = "张";
          this.packingUnit = "套";
        } else {
          this.packingUnitLable = "套";
          this.packingUnit = "张";
        }
      } else {
        //卷
        this.orderForm.productBase.boxEqualTags =
          pageEqualTagsNum * boxEqualPackagesNum;
      }
    },
    // 得到实际总金额
    getAllPrice() {
      this.orderForm.baseData.practicalPayMoney =
        Number(this.orderForm.baseData.actualPrice) *
        Number(this.orderForm.baseData.taoZhuangQuantity);
      // 计算优惠金额
      this.getDiscountsMoney();
    },
    // 计算优惠金额
    getDiscountsMoney() {
      // 套装总金额 - 实际总金额
      this.orderForm.baseData.discountsMoney =
        Number(this.orderForm.baseData.orderMoney) -
        Number(this.orderForm.baseData.practicalPayMoney);
    },
    // 计算套装单价和套装总金额
    getTagUnitPrice() {
      const tagDataList = this.orderForm.productBase.tagDataList;
      const tagTotalPrice = tagDataList.reduce(
        (totalPrice, item) =>
          accAdd(
            totalPrice,
            accMul(Number(item.matchQuantity), Number(item.productTagPrice))
          ) || 0,
        0
      );

      //标签数量
      // percentageValue

      // 套装单价 （ 标签1数量*单价+标签2数量*标签2单价）
      this.orderForm.baseData.taoZhuangPrice = tagTotalPrice;
      this.orderForm.baseData.actualPrice = tagTotalPrice;
      this.orderForm.productBase.orderProductPrice = tagTotalPrice;
      // 套装总金额 套装单价*套装数量
      this.orderForm.baseData.orderMoney = accMul(
        tagTotalPrice,
        Number(this.orderForm.baseData.taoZhuangQuantity)
      );
      this.orderForm.baseData.practicalPayMoney = accMul(
        tagTotalPrice,
        Number(this.orderForm.baseData.taoZhuangQuantity)
      );
      // 计算优惠金额
      this.getDiscountsMoney();
    },
    // 计算标签总数和套装总金额
    getTagTotal() {
      const tagDataList = [...this.orderForm.productBase.tagDataList];
      console.log(tagDataList);
      let tagTotal = 0;
      tagDataList.forEach((item) => {
        console.log(item);
        tagTotal += Number(item.matchQuantity);
      });
      // const tagTotal = tagDataList.reduce(
      //   (totalPrice, item) => totalPrice + Number(item.matchQuantity) ,
      //   0
      // );
      console.log(tagTotal);
      // 标签总数 （标签1数量+标签2数量）*套数
      this.orderForm.baseData.tagSumQuantity =
        tagTotal * Number(this.orderForm.baseData.taoZhuangQuantity);
      // 计算套装单价和套装总金额
      this.getTagUnitPrice();
      // 计算数据数量
      this.orderForm.baseData.tagDataQuantity = Math.round(
        (Number(this.orderForm.baseData.taoZhuangQuantity) * 110) / 100
      );
    },
    // 得到当前标签的套数
    getMatchQuantity() {
      const tagList = this.orderForm.productBase.tagDataList;
      console.log(tagList);
      tagList.forEach((item) => {
        // const parentItem = tagList.find(
        //   (m) => m.tagClientCode === item.comparisonObject
        // );
        // console.log(parentItem)
        // if (parentItem) {
        //   item.matchQuantity =
        //     Number(parentItem.matchQuantity) * Number(item.percentageValue);
        //   item.parentNum = Number(parentItem.matchQuantity);
        // }
        // item.matchQuantity =
        //     Number(item.matchQuantity) * Number(item.percentageValue);
        //   item.parentNum = Number(item.matchQuantity);
      });
      // 计算标签总数
      this.getTagTotal();
    },
    // 增加一级标签
    addMainTag() {
      const productTagNum = this.orderForm.productBase.tagDataList.length;
      const tagArr = {
        tagClientCode: uuid.v1(), // 标签前端唯一码
        productTagID: 0,
        productTagCode: "",
        productCode: "",
        productTagName: "大标" + productTagNum,
        comparisonObject: 0,
        comparisonObjectName: "",
        percentageValue: "",
        matchQuantity: 1, // 当前标签数量
        parentNum: 1, // 父级标签数量
        productTagPrice: "",
        tagShape: "",
        tagWidth: "",
        tagHeight: "",
        tagBorderRadius: "", // R角
        tagBorder: "", // 边空
        tagType: 4, // 标签类型
        postedContent: "", // 被贴物
        layerDataList: [
          {
            layerClientCode: uuid.v1(), // 标签印刷层前端唯一码
            printingLayerID: "", // 标签印刷层主键ID
            printingLayerCode: "", // 标签印刷层代码
            productTagCode: "", // 产品标签代码
            isSurfaceLayer: 1, // 是否为表面层1是；0否
            printingLayerName: "印刷表面",
            printingMaterial:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .printingMaterial, //材料
            surfaceRequireList:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .surfaceRequireList, // 表面要求
            baseFilmColor:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .baseFilmColor, //底膜颜色
            scrapingCoatingColor:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .scrapingCoatingColor, //刮开涂层颜色
            scrapingWordColor:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .scrapingWordColor, //刮开文字颜色
            isHaveTechno: 0, // 是否有数码 0否；1是
            technoPlaces: "", // 数码位数
            isHaveBarCode: 0, // 是否有条码 0否；1是
            barCodePlaces: "", // 条码位数
            isLiuJiao: 1, // 是否留胶：1是；0否
            liuJiaoTexture:
              this.orderForm.productBase.tagDataList[0].layerDataList[0]
                .liuJiaoTexture, // 留胶材质
          },
        ], // 标签印刷底层数
        colorDataList: [], // 印刷色数据列表
      };
      this.orderForm.productBase.tagDataList.push(tagArr);
      // 计算标签总数
      this.getTagTotal();
    },

    //材料选择事件
    handleCLChange(e) {
      this.orderForm.productBase.tagDataList.forEach((i) => {
        i.layerDataList.forEach((j) => {
          j.printingMaterial = e;
        });
      });
    },

    //表面要求选择事件
    handleYQChange(e) {
      this.orderForm.productBase.tagDataList.forEach((i) => {
        i.layerDataList.forEach((j) => {
          j.surfaceRequireList = e;
        });
      });
    },

    //底膜颜色
    handleDMChange(e) {
      this.orderForm.productBase.tagDataList.forEach((i) => {
        i.layerDataList.forEach((j) => {
          j.baseFilmColor = e;
        });
      });
    },

    //刮开涂层颜色
    handleTCChange(e) {
      this.orderForm.productBase.tagDataList.forEach((i) => {
        i.layerDataList.forEach((j) => {
          j.scrapingCoatingColor = e;
        });
      });
    },

    //刮开文字颜色
    handleTextColorChange(e) {
      this.orderForm.productBase.tagDataList.forEach((i) => {
        i.layerDataList.forEach((j) => {
          j.scrapingWordColor = e;
        });
      });
    },

    // 标签名字更改事件
    changeTagName() {
      const tagList = this.orderForm.productBase.tagDataList;
      tagList.forEach((item) => {
        const parentItem = tagList.find(
          (m) => m.tagClientCode === item.comparisonObject
        );
        if (parentItem) {
          item.comparisonObjectName = parentItem.productTagName;
        }
      });
    },
    // 删除标签
    deleteTag(item, index) {
      const tagList = this.orderForm.productBase.tagDataList;
      const isDelete = tagList.some((m) => {
        return item.tagClientCode === m.comparisonObject;
      });
      if (isDelete) {
        this.$alert("该标签已被引用，请先删除子标签", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        tagList.splice(index, 1);
        // 计算标签总数
        this.getTagTotal();
        1;
      }
    },
    // 增加子级标签
    addSubTag(item, index) {
      const productTagNum = this.orderForm.productBase.tagDataList.length;
      let name = "大标";
      if (this.orderForm.productBase.tagDataList.length == 1) {
        name = "中标";
      } else if (this.orderForm.productBase.tagDataList.length == 2) {
        name = "小标";
      } else if (this.orderForm.productBase.tagDataList.length > 2) {
        name =
          "标签" + Number(this.orderForm.productBase.tagDataList.length + 1);
      }
      const tagArr = {
        tagClientCode: uuid.v1(), // 标签前端唯一码
        productTagID: 0,
        productTagCode: "",
        productCode: "",
        productTagName: name,
        comparisonObject: item.tagClientCode,
        comparisonObjectName: item.productTagName,
        percentageValue: 1,
        matchQuantity: 0, // 当前标签数量
        parentNum: item.matchQuantity, // 父级标签数量
        productTagPrice: "",
        tagShape: "",
        tagWidth: "",
        tagHeight: "",
        tagBorderRadius: "", // R角
        tagBorder: "", // 边空
        tagType: 4, // 标签类型
        postedContent: "", // 被贴物
        layerDataList: [
          {
            layerClientCode: uuid.v1(), // 标签印刷层前端唯一码
            printingLayerID: "", // 标签印刷层主键ID
            printingLayerCode: "", // 标签印刷层代码
            productTagCode: "", // 产品标签代码
            isSurfaceLayer: 1, // 是否为表面层1是；0否
            printingLayerName: "印刷表面",
            printingMaterial: "",
            surfaceRequireList: [], // 表面要求
            baseFilmColor: "",
            scrapingCoatingColor: "",
            scrapingWordColor: "",
            isHaveTechno: 0, // 是否有数码 0否；1是
            technoPlaces: "", // 数码位数
            isHaveBarCode: 0, // 是否有条码 0否；1是
            barCodePlaces: "", // 条码位数
            isLiuJiao: 1, // 是否留胶：1是；0否
            liuJiaoTexture: "", // 留胶材质
          },
        ], // 标签印刷底层数
        colorDataList: [], // 印刷色数据列表
      };
      this.orderForm.productBase.tagDataList.splice(index + 1, 0, tagArr);
      // this.orderForm.productBase.tagDataList.push(tagArr)
    },
    // 初始化订单数据
    getInitOrder() {
      // const orderInitDatas = JSON.parse(localStorage.getItem("orderInit"));
      const parmas = {
        excuteAction: this.orderForm.excuteAction,
        oldOrderNo: this.$route.query.orderNo,
      };
      // if (orderInitDatas) {
      //   this.orderForm.baseData.orderNo = orderInitDatas.orderNo;
      //   this.orderForm.baseData.oldOrderNo = orderInitDatas.oldOrderNo || "";
      //   this.orderForm.baseData.productVersions =
      //     orderInitDatas.productVersions;
      //   this.orderForm.baseData.agreementNo = orderInitDatas.agreementNo;
      //   this.orderForm.productBase.newVersion = orderInitDatas.newVersion;
      //   this.orderForm.productBase.updateVersion = orderInitDatas.updateVersion;
      // } else {
      this.$api.business.InitializeSaleOrder(parmas).then((res) => {
        // localStorage.setItem("orderInit", JSON.stringify(res));
        // if (this.$route.query.orderID) {
        //   this.getOderDetail(() => {
        //     this.orderForm.baseData.orderNo = res.orderNo;
        //     this.orderForm.baseData.oldOrderNo = res.oldOrderNo || "";
        //     this.orderForm.baseData.productVersions = res.productVersions;
        //     this.orderForm.baseData.agreementNo = res.agreementNo;
        //     this.orderForm.productBase.newVersion = res.newVersion;
        //     this.orderForm.productBase.updateVersion = res.updateVersion;
        //     this.orderForm.baseData.xieYiShuHao = "";
        //   });
        // }
        this.orderForm.baseData.orderNo = res.orderNo;
        console.log(this.orderForm);
        this.orderForm.baseData.oldOrderNo = res.oldOrderNo || "";
        this.orderForm.baseData.productVersions = res.productVersions;
        this.orderForm.baseData.agreementNo = res.agreementNo;
        this.orderForm.productBase.newVersion = res.newVersion;
        this.orderForm.productBase.updateVersion = res.updateVersion;
        this.orderForm.productBase.productVersions = res.productVersions;
      });
    },
    // 返回
    Back() {
      this.$router.go(-1);
    },
    closeCusDialog() {
      if (this.$refs.customerForm) {
        this.$refs.customerForm.resetFields();
      }
      this.customerForm = this.$options.data().customerForm;
    },
    closeContractDialog() {
      if (this.$refs.contractForm) {
        this.$refs.contractForm.resetFields();
      }
      this.contractForm = this.$options.data().contractForm;
    },
    closeColorDialog() {
      if (this.$refs.colorForm) {
        this.$refs.colorForm.resetFields();
      }
      this.colorForm = this.$options.data().colorForm;
    },
  },
};
</script>
<style lang="scss" scoped>
.colorList {
  margin-top: 10px;
  li {
    border: 1px solid #eeeeef;
    margin-bottom: 10px;
    .fName {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        height: 22px;
        border-left: 3px solid #3f61f1;
        top: -1px;
      }
    }
    .colorCon {
      line-height: 22px;
      padding: 16px;
    }
  }
}
.newLayeeCon {
  margin-top: 10px;
  .el-button {
    width: 100%;
  }
}
.tagsBox {
  flex: 1;
  height: calc(100% - 36px);
  width: 100%;
  .tagsRgBox {
    width: 320px;
    flex-shrink: 0;
    height: 100%;
    border-left: 1px solid #e6e6e6;
    background: #fff;
    overflow: auto;
    .tabBox {
      ul {
        li {
          width: 50%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          border-right: 1px solid #e6e6e6;
          background: #f7f8faff;
          border-bottom: 1px solid #e6e6e6;
          cursor: pointer;
          &:last-child {
            border-right: none;
          }
          &.on {
            background: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
    }
    .tabCon {
      width: 100%;
      padding: 0 16px;
    }
  }
  .tagsLfBox {
    flex: 1;
    height: 100%;
    background: #f2f4f5ff;
    position: relative;
    width: calc(100% - 320px);
    min-width: 500px;
    overflow-x: auto;
    .yinshuaBox {
      height: 32px;
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      ul {
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        overflow: hidden;
        li {
          padding: 8px 16px;
          border-right: 1px solid #e6e6e6;
          background: #fff;
          cursor: pointer;
          &:last-child {
            border-right: none;
          }
          &.on {
            background: #3f61f1;
            color: #fff;
          }
        }
      }
    }
    .tagShow {
      padding: 16px;
      position: absolute;
      left: 0;
      top: 0;

      li {
        line-height: 25px;
        margin-bottom: 5px;
        padding-left: 16px;
        position: relative;

        > span {
          padding: 0 16px;
          display: inline-block;
          margin-left: 10px;
          line-height: 22px;
          border-radius: 22px;
          background: #3f61f1;
          color: #fff;
        }

        &:after {
          content: "";
          position: absolute;
          width: 12px;
          height: 12px;
          background: #3f61f1;
          border-radius: 100%;
          border: 3px solid #cbd5ff;
          top: 6px;
          left: -5px;
        }

        &:before {
          content: "";
          position: absolute;
          top: 10px;
          left: 0px;
        }

        &:not(:last-child):before {
          bottom: -17px;
          background: #3f61f1;
          width: 1px;
        }
      }
    }
    .labelBox {
      width: 400px;
      height: 300px;
      background: #fff;
      position: relative;
      &.square {
        width: 300px;
      }
      &.heteroideus {
        .yixing {
          position: absolute;
          bottom: 0;
          right: 0px;
          width: 100px;
          height: calc(100% - 50%);
          background: #fff;
          padding: 10px 0px 0 10px;
          border: 1px rgba(0, 0, 0, 0.1) dashed;
          border-right: none;
          border-bottom: none;
          z-index: 100;
          > .yibg1 {
            background: #f2f4f5ff;
            height: 100%;
          }
        }
      }
      &.circular {
        width: 300px;
        border-radius: 100%;
        .xuxianBox {
          border-radius: 100%;
        }
        .yuan {
          width: 300px;
          height: 300px;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 100%;
          overflow: hidden;
        }
        .tagType {
          width: 100%;
          text-align: center;
          padding: 10px 8px;
        }
      }
      &.ellipse {
        height: 250px;
        border-radius: 50%;
        .xuxianBox {
          height: 232px;
          border-radius: 50%;
        }
        .yuan {
          height: 250px;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
          overflow: hidden;
        }
        .tagType {
          width: 100%;
          text-align: center;
          padding: 10px 8px;
        }
      }
      .xuxianBox {
        border: 1px dashed #e6e6e6;
        margin: 10px;
        height: calc(100% - 20px);
        .barCode {
          i {
            font-size: 40px;
          }
        }
        .digital {
          i {
            font-size: 40px;
          }
        }
      }
      .tpBorder {
        position: absolute;
        width: 16px;
        height: 16px;
      }
      .coating {
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .tagBorder {
        position: absolute;
        bottom: 100%;
        left: 100%;
        margin-bottom: 5px;
        margin-left: 10px;
        white-space: nowrap;
        line-height: 20px;
      }
      .tagHeight {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 100%;
        margin-left: 10px;
        height: 100%;
        text-align: center;
        white-space: nowrap;
      }
      .tagWidth {
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 30px;
      }
      .tagType {
        background: #e13335;
        border-radius: 0 0 8px 0px;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        padding: 5px 8px;
      }
      .jiaobiaoRB {
        bottom: -16px;
        right: -16px;
        &:before {
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          top: 5px;
        }
        &:after {
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          top: 0;
          right: 0;
        }
      }
      .jiaobiaoLB {
        bottom: -16px;
        left: -16px;
        &:before {
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          top: 0px;
        }
        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 0;
          right: 0;
        }
      }
      .jiaobiaoRT {
        right: -16px;
        top: -16px;
        &:before {
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 5px;
        }
        &:after {
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          bottom: 0;
          right: 0;
        }
      }
      .jiaobiaoLT {
        left: -16px;
        top: -16px;
        &:before {
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          bottom: 0;
        }
        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 5px;
          right: 0;
        }
      }
    }
  }
}

.thumbnailBox {
  background: #3f61f110;
  padding: 8px;

  .fileIco {
    color: #fff;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    background: #e13335;
  }

  .icoBox {
    height: 36px;
    width: 36px;
  }

  .uploadTxt {
    line-height: 18px;
    margin-left: 10px;
  }
}

.tagdelete {
  display: inline-block;
  background: #f5f7faff;
  border: 1px solid #dcdfe6ff;
  border-radius: 4px;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  margin-left: 10px;
}

.subAddTag {
  width: 8px;
  height: 40px;
  border: 1px solid #9a9a9aff;
  border-left: none;
  position: relative;

  &.subtag {
    height: 80px;
  }

  span {
    display: inline-block;
    position: absolute;
    right: -8px;
    color: #3f61f1;
    top: 50%;
    transform: translateY(-50%);
  }
}

.cenCon {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  width: calc(100% - 350px);
  overflow-x: hidden;

  .tagsNav {
    height: 36px;
    border-bottom: 2px solid #3f61f1;
    background: #fff;
    overflow-y: hidden;

    li {
      padding-top: 5px;
      margin-left: 5px;

      > span {
        background: #fff;
        display: inline-block;
        padding: 0 20px;
        line-height: 32px;
        border-radius: 5px 5px 0 0;
        border: 1px solid #d2d2d2ff;
        cursor: pointer;
      }

      > span.on {
        background: #3f61f1;
        color: #fff;
        border: 1px solid #3f61f1;
      }
    }
  }
}

.formBox {
  padding: 16px 16px 0;
}

.orderForm {
  height: 100%;
  width: 100%;
}

.mainCenter {
  height: calc(100% - 52px);
  width: 100%;
  overflow-x: hidden;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
<style lang="scss">
.selectd {
  td {
    background: #3f61f110;
  }
}

.formItem {
  .el-form-item {
    margin-bottom: 0;
  }

  .el-form-item__label {
    line-height: 37px;
  }

  .el-form-item__content {
    line-height: 37px;

    .el-input-group {
      vertical-align: initial;
    }
  }

  .el-select,
  .el-date-editor.el-input {
    width: 100%;
  }

  .el-textarea {
    vertical-align: middle;
  }
}
@media screen and (max-width: 1200px) {
  // 在此写此条件下的css样式
  .tagsLfBox {
    display: none;
  }

  .tagsRgBox {
    flex: 1;
    width: 100%;
  }
}
</style>
